<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖

    import Map from 'ol/Map';
    import View from 'ol/View';
    import Feature from 'ol/Feature';
    import GeoJSON from 'ol/format/GeoJSON';
    import {Circle as CircleStyle, Icon, Stroke, Style} from 'ol/style';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Vector as VectorLayer} from 'ol/layer';
    import {Point} from 'ol/geom';
    import TileLayer from 'ol/layer/Tile'
    import icon from './image/icon.png'

    export default {
        name: "VectorIconLayer",
        mounted() {
            //矢量数据源
            const vectorSource = new VectorSource();
            let vectorLayer = new VectorLayer({
                source: vectorSource,
            })
            this.map = new Map({
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }), vectorLayer],
                target: 'map',
                view: new View({
                    center: [116.38916015624999, 39.926588421909436],
                    projection: "EPSG:4326", //指定投影
                    zoom: 4,
                }),
            });

            //添加的要素样式
            this.addFeatureStyle(vectorSource);

        },
        methods: {

            //给不同的要素设置不同的样式
            addFeatureStyle(vectorSource) {
                fetch('http://localhost:8888/openlayer/geojson/china.json')
                    .then(response => response.json())
                    .then((json) => {
                        console.log(json)
                        //读取geojson格式的要素数据
                        const features = new GeoJSON().readFeatures(json);
                        vectorSource.addFeatures(features);
                        //遍历要素数据
                        for (const feature of features) {
                            //获取到要素的数据信息
                            let center = feature.get("centroid");
                            if (center) {
                                //创建一个点要素
                                let pointFeature = new Feature({
                                    geometry: new Point(center), //几何信息
                                });
                                //给点要素设置样式
                                pointFeature.setStyle(new Style({
                                    image: new Icon({
                                        //anchor: [1, 1],//锚点
                                        // anchorOrigin: 'bottom-left',//bottom-left、bottom-right、top-left、top-right
                                        // anchorXUnits: 'fraction',//百分比为单位
                                        // anchorYUnits: 'pixels',//像素为单位
                                        //offset: [10, 10],//偏移量，偏移之后图像的外观会被切割
                                        //offsetOrigin: 'top-left',//偏移的原点
                                        //color:"#7fff9e",//图标着色的颜色和图片的颜色混合
                                        displacement: [10, 10],//图标基于原点的偏移,偏移之后图像是不会被切割
                                        //img:
                                        //size:
                                        // imgSize: [36, 48],//img ,size imgSize,icon是可以设置img标签和canvas绘制的图片
                                        scale: 1, //图标缩放比例
                                        opacity: 0.75, //透明度
                                        rotateWithView: false,//是否随视图旋转图标
                                        //rotation: Math.PI / 2,//以弧度为单位的旋转
                                        src: icon,
                                        crossOrigin: 'anonymous',//配置可以跨域
                                    }),
                                    zIndex: 9999
                                }));
                                //克隆一个点要素
                                let clone = pointFeature.clone();
                                clone.setStyle(new Style({
                                    image: new CircleStyle({
                                        radius: 10,
                                        stroke: new Stroke({
                                            color: 'red',
                                            width: 10
                                        }),
                                    })
                                }))
                                //将所有的点要素添加到矢量数据源中
                                vectorSource.addFeatures([pointFeature, clone]);
                            }
                        }
                        //当前视口适配数据源的范围
                        this.map.getView().fit(vectorSource.getExtent());
                    });
            }
        }
    }
</script>

<style scoped>

</style>